<template>
  <view 
    class="trust-card" 
    :class="[card.rarity, { 'card-selected': isSelected, 'card-used': isUsed }]"
    @click="showDetail"
    @touchstart="startDrag"
    @touchend="endDrag"
    @touchmove="onDrag"
  >
    <!-- 卡牌背景 -->
    <view class="card-background">
      <view class="card-glow" :class="card.rarity"></view>
    </view>
    
    <!-- 卡牌图标 -->
    <view class="card-icon">
      <text class="icon">{{ card.icon }}</text>
    </view>
    
    <!-- 卡牌信息 -->
    <view class="card-info">
      <text class="card-name">{{ card.name }}</text>
      <text class="card-effect">{{ card.description }}</text>
    </view>
    
    <!-- 稀有度标识 -->
    <view class="rarity-badge" :class="card.rarity">
      <text class="rarity-text">{{ getRarityText(card.rarity) }}</text>
    </view>
    
    <!-- 使用状态 -->
    <view class="card-status" v-if="isUsed">
      <text class="status-text">已使用</text>
    </view>
    
    <!-- 拖拽指示器 -->
    <view class="drag-indicator" v-if="isDragging">
      <text class="drag-text">拖拽使用</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TrustCard',
  props: {
    card: {
      type: Object,
      required: true
    },
    isSelected: {
      type: Boolean,
      default: false
    },
    isUsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isDragging: false,
      startY: 0,
      dragDistance: 0
    }
  },
  methods: {
    showDetail() {
      this.$emit('show-detail', this.card)
    },
    
    startDrag(e) {
      if (this.isUsed) return
      
      this.isDragging = true
      this.startY = e.touches[0].clientY
      this.dragDistance = 0
      
      // 触觉反馈
      uni.vibrateShort()
    },
    
    onDrag(e) {
      if (!this.isDragging) return
      
      const currentY = e.touches[0].clientY
      this.dragDistance = this.startY - currentY
      
      // 拖拽超过阈值时显示使用提示
      if (this.dragDistance > 50) {
        this.$emit('drag-to-use', this.card)
      }
    },
    
    endDrag(e) {
      if (!this.isDragging) return
      
      this.isDragging = false
      
      // 拖拽距离超过阈值则触发使用
      if (this.dragDistance > 100) {
        this.$emit('use-card', this.card)
        // 使用动画效果
        this.playUseAnimation()
      }
      
      this.dragDistance = 0
    },
    
    playUseAnimation() {
      // 播放使用动画
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      })
      
      animation.scale(1.2).opacity(0.8).step()
      animation.scale(1).opacity(1).step()
      
      this.animation = animation
    },
    
    getRarityText(rarity) {
      const rarityTexts = {
        'common': '普通',
        'rare': '稀有', 
        'epic': '史诗'
      }
      return rarityTexts[rarity] || '未知'
    }
  }
}
</script>

<style scoped>
.trust-card {
  width: 120rpx;
  height: 180rpx;
  border-radius: 16rpx;
  margin: 0 8rpx;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 250, 0.9));
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.trust-card:active {
  transform: scale(1.05);
}

.trust-card.card-selected {
  transform: translateY(-10rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 123, 255, 0.3);
}

.trust-card.card-used {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* 卡牌背景 */
.card-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16rpx;
}

.card-glow {
  position: absolute;
  top: -2rpx;
  left: -2rpx;
  right: -2rpx;
  bottom: -2rpx;
  border-radius: 18rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-glow.common {
  background: linear-gradient(45deg, #ffffff, #f8f9fa);
  border: 2rpx solid #ffffff;
}

.card-glow.rare {
  background: linear-gradient(45deg, #4a90e2, #357abd);
  border: 2rpx solid #4a90e2;
  opacity: 0.8;
}

.card-glow.epic {
  background: linear-gradient(45deg, #e6c229, #d4af37);
  border: 2rpx solid #e6c229;
  opacity: 0.9;
}

.trust-card:hover .card-glow {
  opacity: 1;
}

/* 卡牌图标 */
.card-icon {
  position: absolute;
  top: 16rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  backdrop-filter: blur(10rpx);
}

.card-icon .icon {
  font-size: 24rpx;
}

/* 卡牌信息 */
.card-info {
  position: absolute;
  bottom: 40rpx;
  left: 8rpx;
  right: 8rpx;
  text-align: center;
}

.card-name {
  display: block;
  font-size: 18rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 4rpx;
  line-height: 1.2;
}

.card-effect {
  display: block;
  font-size: 12rpx;
  color: #666;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 稀有度标识 */
.rarity-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  padding: 2rpx 6rpx;
  border-radius: 8rpx;
  font-size: 10rpx;
  font-weight: bold;
}

.rarity-badge.common {
  background: rgba(108, 117, 125, 0.8);
  color: white;
}

.rarity-badge.rare {
  background: rgba(74, 144, 226, 0.8);
  color: white;
}

.rarity-badge.epic {
  background: rgba(230, 194, 41, 0.8);
  color: #333;
}

/* 使用状态 */
.card-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 14rpx;
  font-weight: bold;
}

/* 拖拽指示器 */
.drag-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 12rpx;
  font-weight: bold;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

/* 稀有度边框 */
.trust-card.rarity-common {
  border: 2rpx solid #ffffff;
}

.trust-card.rarity-rare {
  border: 2rpx solid #4a90e2;
}

.trust-card.rarity-epic {
  border: 2rpx solid #e6c229;
}

/* 移动端优化 */
@media (max-width: 768rpx) {
  .trust-card {
    width: 100rpx;
    height: 150rpx;
    margin: 0 6rpx;
  }
  
  .card-icon {
    width: 32rpx;
    height: 32rpx;
    top: 12rpx;
  }
  
  .card-icon .icon {
    font-size: 20rpx;
  }
  
  .card-name {
    font-size: 16rpx;
  }
  
  .card-effect {
    font-size: 10rpx;
  }
}
</style>

